<template>
  <div class="login-body">
    <div class="login-form">
      <div class="login-main">
        <div class="top-logo">
          <div class="logo">
            <i></i>
            <span>管理中心</span>
          </div>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="登陆" name="ToLogin">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm write-form login-form-landing">
              <el-form-item prop="username">
                <el-input v-model="ruleForm.username" type="text" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="ruleForm.password" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item>
                <a href="javascript:" class="layadmin-user-jump-change layadmin-link">忘记密码？</a>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login('ruleForm')">登录</el-button>
                <el-button type="primary" >重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="注册" name="ToRegister">
            <el-form ref="registerForm" :model="registerForm" :rules="rules" class="demo-ruleForm write-form login-form-register">
              <el-form-item prop="newUsername">
                <el-input v-model="registerForm.newUsername" type="text" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item prop="newPassword">
                <el-input v-model="registerForm.newPassword" type="text" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item prop="newPasswordSure">
                <el-input v-model="registerForm.newPasswordSure" type="text" placeholder="确认密码"></el-input>
              </el-form-item>
              <el-form-item prop="newPhone">
                <el-input v-model="registerForm.newPhone" type="text" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item prop="newNickname">
                <el-input v-model="registerForm.newNickname" type="text" placeholder="请输入昵称"></el-input>
              </el-form-item>
              <el-form-item>
                本APP仅供房产中介行业登录使用
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="register('registerForm')">提交申请</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="footer">
      <p>copyright@2017 All rights reserved</p>
    </div>
  </div>
</template>

<script>
export default{
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        const reg = /^(\w){2,20}$/
        if (reg.test(value)) {
          const countData = { FAccount: value }
          this.$axios.get('/api/Register/CheckAccount', countData)
            .then((response) => {
              const res = response.data
              if (res.code == 1) {
                if (res.object == 1) {
                  return callback(new Error('用户名重复，请重新输入'))
                }
                callback()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          callback(new Error('只能输入2-20个字母、数字'))
        }
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.registerForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateNewphone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('手机号不能为空'))
      } else {
        const reg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/
        if (reg.test(value)) {
          const phoneData = { FMobile: value }
          this.$axios.get('/api/Register/CheckMobile', phoneData)
            .then((response) => {
              const res = response.data
              if (res.code == 1) {
                if (res.object == 1) {
                  return callback(new Error('手机号重复，请重新输入'))
                }
                callback()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    var validateNickname = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入昵称'))
      } else {
        const reg = /^(\w){2,20}$/
        if (reg.test(value)) {
          const nicknNameData = { FNickName: value }
          this.$axios.get('/api/Register/CheckNickName', nicknNameData)
            .then((response) => {
              const res = response.data
              if (res.code == 1) {
                if (res.object == 1) {
                  return callback(new Error('昵称重复，请重新输入'))
                }
                callback()
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          callback(new Error('只能输入2-20个字母、数字'))
        }
      }
    }
    return {
      activeName: 'ToLogin',
      ruleForm: {
        errorMsg: '',
        username: '',
        password: ''
      },
      registerForm: {
        newUsername: '',
        newPassword: '',
        newPasswordSure: '',
        newPhone: '',
        newNickname: ''
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 3,
          max: 30,
          message: '长度在 6 到 30 个字符'
        }, {
          pattern: /^(\w){3,20}$/,
          message: '只能输入6-20个字母、数字、下划线'
        }],
        newUsername: [{
          validator: validateUsername,
          trigger: 'blur'
        }],
        newPassword: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }, {
          min: 3,
          max: 30,
          message: '长度在 3 到 30 个字符'
        }, {
          pattern: /^(\w){3,20}$/,
          message: '只能输入2-20个字母、数字、下划线'
        }],
        newPasswordSure: [{
          validator: validatePass,
          trigger: 'blur'
        }],
        newPhone: [{
          validator: validateNewphone,
          trigger: 'blur'
        }],
        newNickname: [{
          validator: validateNickname,
          trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    /* 页面挂载获取cookie，如果存在username的cookie，则跳转到主页，不需登录 */
    if (this.$cookieStore.getCookie('api_token')) {
      this.$router.push('/home')
    }
  },
  methods: {
    login(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loginData = { UserName: this.ruleForm.username, UserPwd: this.ruleForm.password }
          this.$axios.post('/api/Login/GetUserInfo', loginData)
            .then((response) => {
              var res = response.data
              if (res.code == 1) {
                this.$message({
                  message: '登录成功',
                  type: 'success'
                })
                const expireDays = 1000 * 60 * 7
                this.$cookieStore.setCookie('api_token', res.object, expireDays)
                this.$store.commit('updateToken', res.object)
                this.$router.push('/home')
              } else {
                this.$message.error(res.message)
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const registerData = {
            FAccount: this.registerForm.newUsername,
            FPwd: this.registerForm.newPasswordSure,
            FMobile: this.registerForm.newPhone,
            FNickName: this.registerForm.newNickname
          }
          this.$axios.post('/api/Register/RegisterAccount', registerData)
            .then((response) => {
              var res = response.data
              if (res.code == 1) {
                this.$message({
                  message: '注册成功，请等待审核',
                  type: 'success'
                })
                this.$refs[formName].resetFields()
                this.activeName = 'ToLogin'
              } else {
                this.$message.error('注册失败')
              }
            })
            .catch((err) => {
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    ToLogin() {

    },
    ToRegister() {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-tabs__nav {
  width: 100% !important;
}
.el-tabs__item {
  width: 50% !important;
}
.el-input__inner{
  position: relative;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  box-sizing: border-box;
  border: 1px solid #dcdfe6;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  width: 100%;
}
@media (-webkit-min-device-pixel-ratio: 2){
  .el-form-item {
    margin-bottom: 0.6rem;
  }
  .el-form-item .el-input__inner {
    height: 0.8rem;
    line-height: 0.8rem;
  }
  .el-form-item .el-form-item__error {
    margin-top: 0.1rem;
  }
  .el-input {
    width: 99%;
  }
  .el-input:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: -100%;
    bottom: -100%;
    left: 0;
    border: 1px solid #dcdfe6;/*no*/
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    width: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .is-success .el-input:after {
    border: 1px solid #67c23a;/*no*/
  }
  .is-error .el-input:after {
    border: 1px solid #f56c6c;/*no*/
  }
}
</style>
<style scoped>
/* 本地样式 */
</style>
